<template>
  <n-modal
    v-model:show="showModal"
    :show-icon="false"
    preset="dialog"
    title="扫描"
    :style="{ width: props.width + 'px' }"
    @update:show="handleUpdateShow"
  >
    <n-form :model="formData" :rules="rules" ref="formRef" label-width="auto" label-placement="top">
      <n-grid :cols="1" :x-gap="24">
        <n-form-item-gi label="路径前缀" path="pathPfx">
          <n-input placeholder="请输入路径前缀" v-model:value="formData.pathPfx" />
        </n-form-item-gi>
        <n-form-item-gi label="扫描路径" path="scanDir">
          <n-input placeholder="请输入扫描路径" v-model:value="formData.scanDir" />
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <template #action>
      <n-space>
        <n-button @click="() => handleUpdateShow(false)">取消</n-button>
        <n-button v-if="hasPermission('bmpch:route:scan', '扫描路由')" type="info" :loading="saveBtnLoading" @click="handleScan">
          <template #icon>
            <n-icon>
              <ScanOutlined />
            </n-icon>
          </template>
          扫描
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, watch } from 'vue';
import type { FormRules, FormInst } from 'naive-ui';
import { ScanOutlined } from '@vicons/antd';
import { chnlQry } from '@yanfan/bmpch-tsapi/chnl';
import { routeScan } from '@yanfan/bmpch-tsapi/route';
import type * as BMPCH from '@yanfan/bmpch-tsapi/types';
import { usePermission } from '@yanfan/common/hooks';

defineOptions({
  name: 'BmpchRouteScan',
  titl: '路由扫描',
});

const { hasPermission } = usePermission();

const props = withDefaults(
  defineProps<{
    show: boolean;
    width?: number;
    sysId: string;
    chnlId: string;
  }>(),
  {
    show: false,
    width: 530,
  },
);

const emits = defineEmits<{
  (e: 'update:show', show: boolean): void;
  (e: 'refresh'): void;
}>();

class FormData {
  chnlId: string = '';
  pathPfx: string = '';
  scanDir: string = '';
}

const rules: FormRules = {};

const formRef = ref<FormInst | null>(null);
const showModal = ref(false);
const chnlOpts = ref<BMPCH.ChnlQryOutput_ChnlDto[]>([]);
const saveBtnLoading = ref(false);
const formData = reactive(new FormData());

watch(
  () => unref(props).show,
  (show) => {
    showModal.value = show;
    if (showModal.value) {
      loadChnlData();
      formData.chnlId = props.chnlId;
    }
  },
);

function handleUpdateShow(value: boolean) {
  emits('update:show', value);
}

function loadChnlData() {
  chnlQry({
    pageIndx: 1,
    pageSize: 1000,
    sysId: props.sysId,
  }).then((data) => {
    chnlOpts.value = data.list;
  });
}

function handleScan() {
  saveBtnLoading.value = true;
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      routeScan(formData)
        .then((data) => {
          handleUpdateShow(false);
          window.$message.success('扫描成功');
          emits('refresh');
        })
        .finally(() => (saveBtnLoading.value = false));
    } else {
      window.$message.error('请填写完整信息');
      saveBtnLoading.value = false;
    }
  });
}
</script>

<style lang="less" scoped></style>
